import React from 'react';
import {
  Box,
  Paper,
  Typography,
  List,
  ListItem,
  ListItemAvatar,
  ListItemText,
  Avatar,
  Chip,
  Divider,
  IconButton,
  Tooltip,
} from '@mui/material';
import {
  Person,
  Mic,
  MicOff,
  Videocam,
  VideocamOff,
  PersonAdd,
  Circle,
} from '@mui/icons-material';
import { Participant } from '@/types';

interface ParticipantsListProps {
  participants: Participant[];
  currentUserId: string;
}

const ParticipantsList: React.FC<ParticipantsListProps> = ({
  participants,
  currentUserId,
}) => {
  const formatJoinTime = (timestamp: number) => {
    const date = new Date(timestamp);
    return date.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  const getStatusColor = (isConnected: boolean) => {
    return isConnected ? 'success' : 'error';
  };

  const getStatusText = (isConnected: boolean) => {
    return isConnected ? '在线' : '离线';
  };

  return (
    <Paper
      elevation={2}
      sx={{
        width: 280,
        height: 'fit-content',
        maxHeight: '100%',
        borderRadius: 2,
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      {/* 标题 */}
      <Box
        sx={{
          p: 2,
          backgroundColor: 'primary.main',
          color: 'white',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <Typography variant="h6" sx={{ fontWeight: 600 }}>
          参与者 ({participants.length})
        </Typography>
        <Tooltip title="邀请更多人">
          <IconButton
            size="small"
            sx={{
              color: 'white',
              '&:hover': {
                backgroundColor: 'rgba(255, 255, 255, 0.1)',
              },
            }}
          >
            <PersonAdd />
          </IconButton>
        </Tooltip>
      </Box>

      {/* 参与者列表 */}
      <Box sx={{ flex: 1, overflow: 'auto' }}>
        {participants.length === 0 ? (
          <Box
            sx={{
              p: 3,
              textAlign: 'center',
              color: 'text.secondary',
            }}
          >
            <Person sx={{ fontSize: 48, mb: 1, opacity: 0.5 }} />
            <Typography variant="body2">
              暂无其他参与者
            </Typography>
          </Box>
        ) : (
          <List sx={{ p: 0 }}>
            {participants.map((participant, index) => {
              const isCurrentUser = participant.id === currentUserId;
              
              return (
                <React.Fragment key={participant.id}>
                  <ListItem
                    sx={{
                      py: 1.5,
                      px: 2,
                      backgroundColor: isCurrentUser ? 'action.hover' : 'transparent',
                    }}
                  >
                    <ListItemAvatar>
                      <Avatar
                        sx={{
                          backgroundColor: isCurrentUser ? 'primary.main' : 'secondary.main',
                          position: 'relative',
                        }}
                      >
                        <Person />
                        {/* 在线状态指示器 */}
                        <Circle
                          sx={{
                            position: 'absolute',
                            bottom: 0,
                            right: 0,
                            fontSize: 12,
                            color: getStatusColor(participant.isConnected),
                            backgroundColor: 'white',
                            borderRadius: '50%',
                          }}
                        />
                      </Avatar>
                    </ListItemAvatar>
                    
                    <ListItemText
                      primary={
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                          <Typography
                            variant="body1"
                            sx={{
                              fontWeight: isCurrentUser ? 600 : 400,
                              color: isCurrentUser ? 'primary.main' : 'text.primary',
                            }}
                          >
                            {isCurrentUser ? '您' : participant.id}
                          </Typography>
                          {isCurrentUser && (
                            <Chip
                              label="我"
                              size="small"
                              color="primary"
                              variant="outlined"
                            />
                          )}
                        </Box>
                      }
                      secondary={
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
                          <Chip
                            label={getStatusText(participant.isConnected)}
                            size="small"
                            color={getStatusColor(participant.isConnected)}
                            variant="outlined"
                          />
                          <Typography variant="caption" color="text.secondary">
                            {formatJoinTime(participant.joinedAt)}
                          </Typography>
                        </Box>
                      }
                    />
                    
                    {/* 音视频状态 */}
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                      <Tooltip title={participant.isAudioEnabled ? '麦克风开启' : '麦克风关闭'}>
                        <IconButton
                          size="small"
                          sx={{
                            color: participant.isAudioEnabled ? 'success.main' : 'error.main',
                            backgroundColor: participant.isAudioEnabled ? 'success.light' : 'error.light',
                            '&:hover': {
                              backgroundColor: participant.isAudioEnabled ? 'success.light' : 'error.light',
                            },
                          }}
                        >
                          {participant.isAudioEnabled ? (
                            <Mic sx={{ fontSize: 16 }} />
                          ) : (
                            <MicOff sx={{ fontSize: 16 }} />
                          )}
                        </IconButton>
                      </Tooltip>
                      
                      <Tooltip title={participant.isVideoEnabled ? '摄像头开启' : '摄像头关闭'}>
                        <IconButton
                          size="small"
                          sx={{
                            color: participant.isVideoEnabled ? 'success.main' : 'error.main',
                            backgroundColor: participant.isVideoEnabled ? 'success.light' : 'error.light',
                            '&:hover': {
                              backgroundColor: participant.isVideoEnabled ? 'success.light' : 'error.light',
                            },
                          }}
                        >
                          {participant.isVideoEnabled ? (
                            <Videocam sx={{ fontSize: 16 }} />
                          ) : (
                            <VideocamOff sx={{ fontSize: 16 }} />
                          )}
                        </IconButton>
                      </Tooltip>
                    </Box>
                  </ListItem>
                  
                  {index < participants.length - 1 && <Divider />}
                </React.Fragment>
              );
            })}
          </List>
        )}
      </Box>

      {/* 底部信息 */}
      <Box
        sx={{
          p: 2,
          backgroundColor: 'grey.50',
          borderTop: 1,
          borderColor: 'divider',
        }}
      >
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'center' }}>
          {participants.length > 0 ? (
            `共 ${participants.length} 人在线`
          ) : (
            '等待其他人加入...'
          )}
        </Typography>
      </Box>
    </Paper>
  );
};

export default ParticipantsList;